<template>
  <h3 style="margin-bottom: 20px">菜品编辑</h3>
  <el-form
      ref="ruleFormRef"
      :model="cuisine"
      label-width="120px"
      style="width: 600px;"
  >
    <el-form-item label="菜品名称">
      <el-input v-model="cuisine.name"></el-input>
    </el-form-item>
    <el-form-item label="菜品描述">
      <el-input v-model="cuisine.description"></el-input>
    </el-form-item>
    <el-form-item label="菜品价格">
      <el-input v-model="cuisine.price"></el-input>
    </el-form-item>
    <el-form-item label="图片">
      <el-upload
          @change="handleImageChange"
          class="avatar-uploader"
          action="http://localhost:8080/cuisine/image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          accept="image/jpg,image/jpeg,image/png"
          name="image"
          v-model="cuisine.image"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="avatar"/>
        <el-icon v-else class="avatar-uploader-icon">
          <Plus/>
        </el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {ref} from "vue";
import {Plus} from "@element-plus/icons";
import say from "../../util/say";

let ruleFormRef = ref(null);
let cuisine = ref({
  name: null,
  description: null,
  price: null,
  image: null
});
let imageUrl = ref('')

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    say.sayError('图片尺寸不得大于2MB')
    return false
  }
  return true
}

const handleAvatarSuccess = (
    response,
    uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

const handleImageChange = (file) => {
  cuisine.value.image = file.raw
}
const submitForm = async (formElement) => {
  if (!formElement) return
  await formElement.validate(async (valid) => {
    if (valid) {
      let file = new FormData()
      file.append('image', cuisine.value.image)
      file.append('name', cuisine.value.name)
      file.append('description', cuisine.value.description)
      file.append('price', cuisine.value.price)
      fetch('http://localhost:8080/cuisine/save', {
        method: 'POST',
        body: file
      }).then(response => {
        if(response.ok) {
          say.saySuccess('保存成功')
        } else {
          say.sayError('保存失败')
        }
      }).catch(error => {
        say.sayError('保存失败')
      });
    } else {
      say.sayError('保存失败')
    }
  })
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>